import "./LoginPage.css"
import http from '@/utils/axios';
import { useState, memo, useEffect } from "react";
import useStore from '@/store';
import { useNavigate, Navigate } from 'react-router-dom';
// import http from '@/utils/axios.js'
// import useStore from '@/store';



const LoginPage = () => {
    const isMobileView = useStore(state => state.isMobileView);
    const token = useStore(state => state.token);
    const setToken = useStore(state => state.setToken);
    const [username, setUsername] = useState('');
    const [password, setPassword] = useState('');

    console.log('LoginPage');


    // 处理输入变化
    const handleChange = (e) => {
        const { name, value } = e.target;
        if (name === 'username') {
            setUsername(value)
        } else if (name === 'password') {
            setPassword(value)
        }
    };

    const checkAccessKey = async () => {
        try {

            const response = await http.post("/auth/login", {
                "username": username,
                "password": password
            });
            if (response.status === 200) {
                setToken(response.data.token);
            } else {
                console.error('登录失败，状态码:', response.status);
            }
        } catch (error) {
            console.error('请求失败:', error);
        }
    }

    const isAuthenticated = !!token;
    if (isAuthenticated) {
        return <Navigate to="/app" replace />;
    }

    return (
        // login
        <div
            className="login"
        >

            {/* login-panel */}
            <div
                className="login-panel"
                style={{
                    padding: isMobileView && '10px',
                    borderRadius: !isMobileView && '16px',
                    maxHeight: !isMobileView && '220px',
                    maxWidth: !isMobileView && '400px',
                }}
            >

                {/* login-head */}
                <div className="login-head"><b>Login</b></div>

                <hr style={{ marginTop: '10px', marginBottom: '6px', width: '100%' }} />

                {/* login-input-panel */}
                <div className="login-input-panel"
                // style={{
                //     padding: isMobileView && '10px'
                // }} 
                >
                    <input
                        className="login-input-key"
                        type="text" name="username" placeholder="username"
                        value={username || ''} onChange={handleChange}
                    />
                    <input
                        className="login-input-key"
                        type="password" name="password" placeholder="password"
                        value={password || ''} onChange={handleChange}
                    />

                    <button className="login-button"
                        onClick={checkAccessKey} >Submit</button>
                </div>
            </div>
        </div>




    );
}

export default LoginPage;